import { Component } from "react";
import {
  Button,
  Cell,
  Empty,
  Avatar,
  Grid,
  Image,
  Tabs,
  Divider,
  Sticky,
  Loading,
} from "@nutui/nutui-react-taro";
import styles from "./index.scss";
import { useModel } from "@/store";
import Taro, { useRouter } from "@tarojs/taro";
import { useState } from "react";
import { useEffect } from "react";
import {
  queryClinicChargeItem,
  addOrder,
  getOrderList,
  refund,
  payResult,
} from "@/services/payment";
import { useMemo } from "react";
import { queryAutoRcptNo } from "@/services/register";
import Layout from "@/components/Layout";
import { useRef } from "react";
// import { IconFont } from "@nutui/icons-react-taro";

export default () => {
  const { params } = useRouter();

  const timerId = useRef();

  const { orderNo } = params;

  const [payStatus, setPayStatusPage] = useState(1); //1等待中2成功3失败

  const [count, setCount] = useState(0);

  useEffect(() => {
    if (orderNo) {
      queryOrderResult(orderNo);
    }
  }, [count, orderNo]);

  // TRADE_CLOSED( COde:"TRADE_CLOSED",name:"交易关闭")
  // no usages
  // WAIT_BUYER_PAY( code: "WAIT_BUYER_PAY"name:"等待买家付款")
  // 3 usages
  // TRADE_SUCCESS( COde:"TRADE_SUCCESS"name:"支付成功")
  // 2 usages
  // TRADE_REFUND( code:"TRADE_REFUND", name:"退款”);

  const queryOrderResult = async (orderNo) => {
    const res = await payResult(orderNo);
    if (res.status == "TRADE_SUCCESS") {
      setPayStatusPage(2);
    } else if (res.status == "WAIT_BUYER_PAY") {
      setPayStatusPage(1);

      setTimeout(() => {
        setCount(count + 1);
      }, 1000);
    }
  };

  return (
    <Layout title="缴费">
      <view className={styles.payStatusPage}>
        {payStatus == 1 && (
          <view className={styles.text} style={{ color: "#1989fa" }}>
            缴费中 <Loading type="circular" />
          </view>
        )}
        {payStatus == 2 && (
          <view className={styles.text} style={{ color: "#07c160" }}>
            <view>缴费成功</view>
            <Button
              type="success"
              style={{ marginTop: "20px",width:"40%" }}
              onClick={() => Taro.navigateBack({ delta: 2 })}
            >
              返回
            </Button>
          </view>
        )}
        {payStatus == 3 && (
          <view className={styles.text} style={{ color: "#1989fa" }}>
            缴费失败
          </view>
        )}
      </view>
    </Layout>
  );
};
